<template>
  <el-dialog
    v-if="open"
    class="dia-style"
    title="对比系统配置"
    :visible.sync="open"
    width="70%"
    :close-on-click-modal="false"
    @close="cancel"
  >
    <!-- <div class="btn">
      <el-button type="primary" @click="handleAdd">增加</el-button> -->
    <!-- </div> -->
    <div class="list-box">
      <hk-table
        ref="tableRef"
        :loading="loading"
        :table-data="tableData"
        :table-columns="tableList"
        :show-index="true"
        :total="total"
        :is-need-index="true"
        :operate="true"
        :common-fixed="true"
        :query-params="queryParams"
      >
        <template #operate="scope">
          <!-- {{ scope.row.row }} -->
          <div>
            <!-- <el-button @click="handleListDel(scope.row)">删除</el-button> -->
            <!-- <el-button v-else @click="handleListSave(scope.row.row,scope.row.index)">保存</el-button> -->
            <el-button @click="handleTest(scope.row.row.url)">联通性测试</el-button>
          </div>
        </template>
        <template #name="scope">
          <span v-if="!scope.row.row.updateUser || scope.row.row.isStagingData">{{ scope.row.row.name }}</span>
          <el-input v-else v-model="scope.row.row.name" />
        </template>
        <template #url="scope">
          <span v-if="scope.row.row.isStagingData">{{ scope.row.row.url }}</span>
          <el-input v-else v-model="scope.row.row.url" />
        </template>
      </hk-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { systemSetting, systemUpdate, systemConnect } from '@/api/assets/assetsComparison.js'
import HkTable from '@/components/Hk-Table/index.vue'
export default {
  components: { HkTable },
  data() {
    return {
      open: false,
      loading: false,
      queryParams: {
        size: 10,
        current: 1
      },
      total: this.tableData?.length || 2,
      tableData: [
        // {
        //   name: '一体化平台',
        //   url: '-',
        //   isOldNum: 1
        // },
        // {
        //   name: '三合一系统',
        //   url: 'http://192.168.1.219:88/3in1/host_info.do',
        //   isStagingData: 1
        // }
      ],
      tableList: [
        { label: '系统名称', param: 'name', type: 'slot' },
        { label: '接口地址', param: 'url', type: 'slot' }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(val) {
      this.loading = true
      systemSetting(this.queryParams).then((res) => {
        this.total = res?.length
        this.tableData = res
        this.loading = false
      })
    },
    cancel() {
      this.open = false
      this.getList()
    },
    handleAdd() {
      this.tableData.push({
        name: '',
        url: '',
        updateUser: 1
      })
      this.total = this.tableData.length
    },
    // 联通性能测试
    handleTest(url) {
      systemConnect({ url: url }).then((res) => {
        this.$message.success('测试成功')
      })
    },
    //  删除行
    handleListDel(row) {
      this.tableData.splice(row.index, 1)
      this.total = this.tableData.length
    },
    //  保存行
    handleListSave(row, index) {
      this.$nextTick(() => {
        this.tableData[index] = row
        this.tableData[index].isStagingData = 1
      })
      console.log(this.tableData)
    },
    // 保存
    handleSave() {
      systemUpdate(this.tableData).then((res) => {
        this.$message.success('保存成功')
        this.$emit('handleSubmit')
        this.open = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.list-box {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
  width: 100%;
}
::v-deep .el-dialog .el-dialog__body {
  height: 500px !important;
}
</style>
